<template>
  <div class="container">
    <div class="login">
      <img src="@/assets/img/userAdmin/logo.png" alt class="logo" />
       <div class="login-container-item">
        <van-row type="flex" justify="space-around" align="center">
          <van-col span="4">
             <img src="@/assets/img/userAdmin/iphone.png" alt="" class="left-img">
          </van-col>
          <van-col span="18">
             <input type="" placeholder="请输入电话号码" v-model="phoneNum" >
          </van-col>
          <van-col span="2"></van-col>
        </van-row>
      </div>
       <div class="login-container-item"  >
        <van-row type="flex" justify="space-around" align="center">
          <van-col span="4">
              <img src="@/assets/img/userAdmin/pwdmanage.png" alt="" class="left-img">
         </van-col>
          <van-col span="18"> <input type="" placeholder="请输入密码" v-model="psd" ></van-col>
          <van-col span="2">
               <img src="@/assets/img/userAdmin/pwd1.png" alt="" class="right-img">
          </van-col>
        </van-row>
      </div>
       <div class="btn" @click="Login">登录</div>
    </div>
  </div>
</template>

<script>
import {getMd5,userLogin} from '@/network/userAdmin'
import md5 from "js-md5";
export default {
  name: "Login",
  data() {
    return {
        pwdcode:'',
        phoneNum:'',
        psd:''
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
       
  },
  methods: {
     getUserMd5(phoneNum){
          return getMd5(phoneNum)
     },
     async Login(){
       if(!this.phoneNum){
         this.$toast('请输入电话号码') 
         return false
      }
       if(!this.psd){
         this.$toast('请输入密码')
          return false
      }
       let res= await this.getUserMd5(this.phoneNum)
       let pwdcode = md5(md5(this.psd) + res.data.result);
       let loginData= await userLogin(this.phoneNum,pwdcode)
       if(loginData.data.code=200){
           this.$toast('登录成功')
           localStorage.setItem("token",loginData.data.result[0].token)
           this.$router.push("/Source");
       }else{
           this.$toast('登录失败')
       }
     }
  },
};
</script>
<style scoped lang='less'>
.login {
  padding: 100px 40px;
  .login-container-item{
     border:1px solid #ddd;
     border-radius:5px;
     line-height:50px;
     margin-bottom: 20px;
     .left-img{
        display: block;
        height:15px ;
        width: 13px;
        margin:0 auto;
     }
     .right-img{
        height:8;
        width: 15px;
        margin:0 auto;
     }
     input{
       font-size:14px;
       line-height: 50px;
       display: block;
       color:#8B8B8BFF
     }
     ::-webkit-input-placeholder {
       color:#B4B4B4FF;
   }
  }
  .btn{
     width: 100%;
     display: block;
     line-height: 50px;
     text-align: center;
     background: var(--bac_color);
     color: #fff;
     border-radius:5px;
     font-size:18px;
  }
}
.logo {
  display: block;
  height: 68px;
  width: 69px;
  margin:30px auto;
}
</style>